<template>
  <layout fixed-navbar>
    <back-navbar>填写信息</back-navbar>
    <div class="box">
      <e-input-label-list>
        <e-input-label
          :has-error="errors.has('title')"
          label="展会名称">
          <e-input
            v-validate="{ required: true, min: 4, max: 40 }"
            v-model="title"
            placeholder="请填写展会名称"
            name="title"
            data-vv-as="展会名称"/>
        </e-input-label>
        <e-input-label
          :has-error="startDateHasError"
          label="展会时间">
          <div class="select"><div
            :class="{ 'select__text--placeholder': startDate === null }"
            class="select__text"
            @click="showStartDateSelector = true">{{ startDate === null ? '开始日期' : formatDate(startDate) }}</div><fa-icon
              class="block select__icon"
              icon="chevron-right"/></div>
        </e-input-label>
        <e-input-label
          :has-error="endDateHasError"
          not-required>
          <div class="select"><div
            :class="{ 'select__text--placeholder': endDate === null }"
            class="select__text"
            @click="showEndDateSelector = true">{{ endDate === null ? '截至日期' : formatDate(endDate) }}</div><fa-icon
              class="block select__icon"
              icon="chevron-right"/></div>
        </e-input-label>
        <e-input-label
          :has-error="errors.has('address')"
          label="展会地点">
          <e-input
            v-validate="{ required: true, min: 4, max: 100 }"
            v-model="address"
            placeholder="请填写展会地点"
            name="address"
            data-vv-as="展会地点"/>
        </e-input-label>
        <e-input-label
          :has-error="errors.has('company')"
          label="公司名称">
          <e-input
            v-validate="{ required: true, min: 4, max: 40 }"
            v-model="company"
            placeholder="请填写公司名称"
            name="company"
            data-vv-as="公司名称"/>
        </e-input-label>
        <e-input-label
          :has-error="errors.has('name')"
          label="姓名">
          <e-input
            v-validate="{ required: true, min: 2, max: 16 }"
            v-model="name"
            placeholder="请输入姓名"
            name="name"
            data-vv-as="姓名"/>
        </e-input-label>
        <e-input-label
          :has-error="errors.has('phone')"
          label="联系电话">
          <e-input
            v-validate="{ required: true, regex: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/ }"
            v-model="phone"
            placeholder="请输入11位手机号码"
            name="phone"
            data-vv-as="联系电话"/>
        </e-input-label>
        <!--<e-input-label-->
        <!--:has-error="errors.has('email')"-->
        <!--label="邮箱地址">-->
        <!--<e-input-->
        <!--v-validate="{ required: true, email: true }"-->
        <!--v-model="email"-->
        <!--placeholder="请输入邮箱地址"-->
        <!--name="email"-->
        <!--data-vv-as="邮箱地址"/>-->
        <!--</e-input-label>-->
        <e-input-label
          :has-error="selectError"
          label="服务类型">
          <div class="select"><div
            :class="{ 'select__text--placeholder': type === null }"
            class="select__text"
            @click="show = !show">{{ type === null ? '选择服务类型' : typeLabels[type - 1] }}</div><fa-icon
              class="block select__icon"
              icon="chevron-right"/></div>
        </e-input-label>
      </e-input-label-list>
    </div>
    <div class="error">{{ error }}</div>
    <div class="last">
      <button
        class="btn"
        @click="create">提交</button>
    </div>
    <van-popup
      v-model="show"
      position="bottom">
      <div class="select-list">
        <div
          class="select-item"
          @click="select(1)">展位预定</div>
        <div
          class="select-item"
          @click="select(2)">拼团行程</div>
        <div
          class="select-item"
          @click="select(3)">行程定制</div>
        <div
          class="select-item"
          @click="select(4)">展台搭建</div>
        <div
          class="select-item"
          @click="select(5)">展品运输</div>
        <div
          class="select-item"
          @click="select(6)">展会门票</div>
      </div>
    </van-popup>
    <van-popup
      v-model="showPublishSuccessMessage"
      :close-on-click-overlay="false"
      class="br-4">
      <div class="modal">
        <div class="modal__title"><fa-icon
          :icon="['far', 'check-circle']"
          class="success mr-8"/>发布成功</div>
        <div class="modal__body">
          信息提交成功
          <br>
          请等待审核，审核结果之后会短信通知您！
        </div>
        <div class="modal__footer">
          <div
            class="btn2"
            @click="showPublishSuccessMessage = false">知道了</div>
        </div>
      </div>
    </van-popup>

    <!--start date-->
    <van-popup
      :close-on-click-overlay="false"
      v-model="showStartDateSelector"
      position="bottom">
      <van-datetime-picker
        v-model="startDate"
        :min-date="new Date()"
        :formatter="formatter"
        type="date"
        @cancel="showStartDateSelector = false"
        @confirm="startDateConfirm"
      />
    </van-popup>
    <van-popup
      :close-on-click-overlay="false"
      v-model="showEndDateSelector"
      position="bottom">
      <van-datetime-picker
        v-model="endDate"
        :min-date="new Date()"
        :formatter="formatter"
        type="date"
        @cancel="showEndDateSelector = false"
        @confirm="endDateConfirm"
      />
    </van-popup>
  </layout>
</template>

<style lang="scss" scoped>
  .btn2 {
    width: 360px;
    height: 92px;
    background-color: #FA8C01;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #fff;
  }

  .success {
    color: #8ad361;
  }
  .modal {
    width: 600px;
    border-radius: 4px;
    &__title {
      text-align: center;
      padding: 24px 32px 0;
      font-size: 32px;
      color: #333;
      &::after {
        content: '';
        padding: 0 32px;
        height: 2px;
        background-color: #eee;
        display: block;
        margin-top: 24px;
      }
    }

    &__body {
      padding: 48px 64px;
      font-size: 28px;
      color: #333;
      line-height: 48px;
    }

    &__footer {
      padding: 24px 32px;
      display: flex;
      justify-content: center;
    }
  }

  .box {
    padding: 24px 32px;
  }

  .btn {
    border: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    height: 100px;
    width: 600px;
    background-color: #FA8C01;
    border-radius: 4px;
    display: inline-block;
    color: #fff;
    font-weight: bold;
    font-size: 36px;
  }

  .error {
    height: 34px;
    font-size: 24px;
    text-align: center;
    color: #F30808;
  }

  .last {
    margin-top: 24px;
    display: flex;
    justify-content: center;
  }

  .select {
    height: 120px;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
    padding: 0 16px;
    &__icon {
      flex-shrink: 0;
      font-size: 30px;
      color: #B3B3B3;
      padding-left: 16px;
    }
    &__text {
      &--placeholder {
        color: #757575;
      }
      flex: 1;
      font-size: 28px;
      color: #343434;
    }
  }

  .select-list {
    padding: 32px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 0;
  }
  .select-item {
    padding: 32px;
    font-size: 32px;
    color: #343434;
    margin-bottom: 32px;
  }
</style>

<script>
import Layout from '@/components/Layout'
import BackNavbar from '@/components/BackNavbar'
import EInput from '@/components/Input'
import EInputLabel from '@/components/InputLabel'
import EInputLabelList from '@/components/InputLabelList'
import { ValidateMixin } from '@/mixins'
import { createExhibition } from '@/api'

export default {
  components: {
    Layout,
    BackNavbar,
    EInput,
    EInputLabel,
    EInputLabelList
  },
  mixins: [ValidateMixin],
  data () {
    return {
      title: '',
      address: '',
      company: '',
      name: '',
      phone: '',
      startDate: null,
      endDate: null,
      type: null,
      show: false,
      typeLabels: [
        '展位预定',
        '拼团行程',
        '行程定制',
        '展台搭建',
        '展品运输',
        '展会门票'
      ],
      selectError: false,
      startDateHasError: false,
      endDateHasError: false,
      showPublishSuccessMessage: false,
      showStartDateSelector: false,
      showEndDateSelector: false
    }
  },
  methods: {
    async init () {
      this.title = ''
      this.address = ''
      this.company = ''
      this.name = ''
      this.phone = ''
      this.startDate = null
      this.endDate = null
      this.type = null
      await this.$validator.reset()
    },
    formatter (type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      }
      return value
    },
    async create () {
      const valid = await this.$validator.validate()
      if (this.type === null) {
        this.selectError = true
      } else {
        this.selectError = false
      }

      if (this.startDate === null) {
        this.startDateHasError = true
      } else {
        this.startDateHasError = false
      }

      if (this.endDate === null) {
        this.endDateHasError = true
      } else {
        this.endDateHasError = false
      }

      if (this.selectError || this.startDateHasError || this.endDateHasError) {
        return
      }

      if (!valid) return

      const toast = this.$toast.loading({
        duration: 0,
        forbidClick: true
      })

      const { code } = await createExhibition({
        ex_name: this.title,
        ex_starttime: this.formatDate(this.startDate),
        ex_endtime: this.formatDate(this.endDate),
        ex_place: this.address,
        company_name: this.company,
        username: this.name,
        telephone: this.phone,
        service_type: this.type
      })

      toast.clear()
      if (code === 1) {
        this.showPublishSuccessMessage = true
        await this.init()
      }
    },
    select (type) {
      this.show = false
      this.type = type
      this.selectError = false
    },
    startDateConfirm (value) {
      this.startDate = value
      this.showStartDateSelector = false
      this.startDateHasError = false
    },
    endDateConfirm (value) {
      this.endDate = value
      this.showEndDateSelector = false
      this.endDateHasError = false
    },
    formatDate (date) {
      const d = new Date(date)
      let month = '' + (d.getMonth() + 1)
      let day = '' + d.getDate()
      const year = d.getFullYear()

      if (month.length < 2) month = '0' + month
      if (day.length < 2) day = '0' + day

      return `${year}年${month}月${day}日`
    }
  }
}
</script>
